<template>
  <div class="chartBox">
    <!--   切换按钮     -->
    <div
        class="switchBtn"
        :class="{'rotate':!chartState}"
        @click="changeChart">
      <span class="iconfont iconqh"></span>
    </div>
    <!-- 脑图 -->
    <yq-article-chart-mindmapg2
        width="99%"
        height="99%"
        ref="g2Hierarchy"
        v-if="!chartState"
        :treeData="treeData">
    </yq-article-chart-mindmapg2>
    <!-- 圆形树状图 -->
    <yq-article-chart-circleg6
        width="99%"
        height="99%"
        ref="g6Tree"
        v-else
        :treeData="treeData">
    </yq-article-chart-circleg6>
  </div>
</template>

<script>
import {tocTree} from '@/api/apis/yuque';
import YqArticleChartCircleG6 from '@/components/YqArticleChartCircleG6'
import YqArticleChartMindMapG2 from '@/components/YqArticleChartMindMapG2'

export default {
  name: "yqArticleChart",
  data() {
    return {
      treeData: {},
      chartState: false,
    }
  },
  methods: {
    changeChart() {
      this.chartState = !this.chartState;
      this.$nextTick(() => {
        if (!this.chartState) {
          this.$refs.g2Hierarchy.initG2Hierarchy()
        } else {
          this.$refs.g6Tree.initG6()
        }
      })
    },
    getTocTree() {
      tocTree().then(res => {
        let {code, data} = res;
        if (code === 20000) {
          this.treeData = {
            id: '文章',
            title: '文章',
            children: data
          };
          this.$nextTick(() => {
            this.$refs.g2Hierarchy.initG2Hierarchy()
          })

        }
      })
    },
  },
  mounted() {
    this.getTocTree()
  },
  components: {
    'yq-article-chart-circleg6': YqArticleChartCircleG6,
    'yq-article-chart-mindmapg2': YqArticleChartMindMapG2
  }
}
</script>

<style scoped lang="scss">
.chartBox {
  width: 80%;
  height: 100%;
  position: relative;

  .switchBtn {
    @include flex(row, center, center);
    @include box(48px, 48px);
    color: #ffffff;
    background-color: rgba(53, 58, 65, 0);
    cursor: pointer;
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 100;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 1px 2px 10px #1e1e1e;
    transition: all .4s ease-in-out;

    &:after {
      content: '';
      display: block;
      position: absolute;
      top: -36px;
      left: -100px;
      background: #ffffff;
      width: 16px;
      height: 125px;
      opacity: .3;
      transform: rotate(-45deg);
    }

    &:hover:after {
      left: 150%;
      transition: all 800ms cubic-bezier(0.3, 1, 0.2, 1);
      -webkit-transition: all 800ms cubic-bezier(0.3, 1, 0.2, 1);
    }
  }

  .rotate {
    transform: rotateY(180deg);
  }
}
</style>